<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java 代码编辑器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>Java 代码编辑器</h1>
            <div class="toolbar">
                <button id="runBtn" class="btn btn-primary">运行</button>
                <button id="debugBtn" class="btn btn-secondary">调试</button>
                <button id="saveBtn" class="btn btn-success">保存</button>
                <button id="loadBtn" class="btn btn-info">加载</button>
                <button id="clearBtn" class="btn btn-warning">清空</button>
                <button id="testHintBtn" class="btn btn-info">测试补全</button>
                <select id="themeSelect" class="theme-select">
                    <option value="monokai">Monokai</option>
                    <option value="default">Default</option>
                    <option value="material">Material</option>
                    <option value="dracula">Dracula</option>
                </select>
            </div>
        </header>
        
        <div class="main-content">
            <div class="editor-panel">
                <div class="panel-header">
                    <span>代码编辑器</span>
                    <div class="file-info">
                        <span id="fileName">Main.java</span>
                        <span id="lineInfo">行: 1, 列: 1</span>
                    </div>
                </div>
                <textarea id="codeEditor" placeholder="在这里输入你的Java代码...">public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
        
        // 示例：简单的计算
        int a = 10;
        int b = 20;
        int sum = a + b;
        System.out.println("Sum: " + sum);
        
        // 示例：循环
        for (int i = 1; i <= 5; i++) {
            System.out.println("Count: " + i);
        }
    }
}</textarea>
            </div>
            
            <div class="right-panel">
                <div class="output-panel">
                    <div class="panel-header">
                        <span>输出结果</span>
                        <button id="clearOutputBtn" class="btn-small">清空</button>
                    </div>
                    <div id="output" class="output-content"></div>
                </div>
                
                <div class="debug-panel">
                    <div class="panel-header">
                        <span>调试信息</span>
                        <div class="debug-controls">
                            <button id="stepBtn" class="btn-small" disabled>单步执行</button>
                            <button id="continueBtn" class="btn-small" disabled>继续</button>
                            <button id="stopDebugBtn" class="btn-small" disabled>停止调试</button>
                        </div>
                    </div>
                    <div class="debug-content">
                        <div class="variables-section">
                            <h4>变量</h4>
                            <div id="variables" class="variables-list"></div>
                        </div>
                        <div class="breakpoints-section">
                            <h4>断点</h4>
                            <div id="breakpoints" class="breakpoints-list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="status-bar">
            <span id="status">就绪</span>
            <span id="compileStatus"></span>
        </div>
    </div>
    
    <!-- 模态框 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3 id="modalTitle">标题</h3>
            <div id="modalBody">内容</div>
            <div class="modal-footer">
                <button id="modalOk" class="btn btn-primary">确定</button>
                <button id="modalCancel" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/clike/clike.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/selection/active-line.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/anyword-hint.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/javascript-hint.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/material.min.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css"></script>
    <script src="script.js"></script>
</body>
</html>